<template>
    <div></div>
</template>

<script>
import { getList } from '@/api/table'
export default {
    data() {
        return{
          getList: [],
          newArr1:[],
          newArr2: [],
          listLoading: true,
        }
    },
    created() {
      this.fetchData()

      this.apiarrcge()
    },
    methods: {
      fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.list = response.data.items
        this.listLoading = false
      })
    },
    apiarrcge(){
      this.$api.Logs.getPv(1).then((res)=>{
        var arr = res.data.data
      //  var arr = ["谷歌","百度","谷歌","微信","360"]
        // var newArr1 = []
        // var newArr2 = []
        for(var i=0; i<arr.length; i++){
          if(this.newArr1.indexOf(arr[i].userAgent) === -1){
            this.newArr1.push(arr[i].userAgent);
          }
        }
        for(var i=0; i<this.newArr1.length; i++){
          var k=0
          for(var j=0; j<arr.length; j++){
            if(this.newArr1[i] === arr[j].userAgent){
              k++
            }
          }
          this.newArr2.push(k);
        }
        console.log(res);
        this.mounted()
     })
    },

    
    mounted() {
    //
    var myChart = this.$echarts.init(document.getElementById('right_hot'))
    let index = 0;
    var colorList = ['#DF3AB9', '#18C79C', '#8555F9', '#F09228'];
    
    var data1 = []
    for(var i=0; i<this.newArr1.length; i++){
      data1.push({
        name: this.newArr1[i],
        value: this.newArr2[i]
      })
    }
    var data = data1
      // console.log(data1)
      // console.log(this.newArr1)
      // console.log(this.newArr2)
    
    // 自动播放函数
    function autoPlay() {
      var timer = setInterval(function () {
        // console.log(index);
        myChart.dispatchAction({
          type: 'hideTip',
          seriesIndex: 0,
          dataIndex: index,
        });
        // 显示提示框
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index,
        });
        // 取消高亮指定的数据图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: index === 0 ? 5 : index - 1,
        });
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: index,
        });
        index++;
        if (index > 5) {
          index = 0;
        }
      }, 3000);
    }
    autoPlay();
    var newData = [];
    // 加阴影效果
    for (var i = 0; i < data.length; i++) {
      newData.push({
        value: data[i].value,
        name: data[i].name,
        itemStyle: {
          normal: {
            // borderWidth: 0,
            shadowBlur: 15,
            // borderRadius: 1,
            // borderColor: colorList[i],
            shadowColor: colorList[i],
          },
        },
      });
    }
    var option = {
      title: {
        text: '浏览器',
        left: '24%',
        top: 'center',
        // x: 'left',
        // y: 'center',
        textStyle: {
          fontSize: 24,
        },
      },
      tooltip: {
        trigger: 'item',
      },
      legend: {
        type: 'scroll',
        orient: 'vertical',
        right: '15%',
        top: 'center',
        selectedMode: true,
        icon: 'pin',
        textStyle: {
          rich: {
            a: {
              color: '#666666',
              fontSize: 14,
              fontWeight: 500,
              width: 30,
              padding: [0, 0, 25, 2],
            },
            b0: {
              // color: colorList[0],
              color: '#666666',
              fontSize: 14,
              fontWeight: 500,
              height: 20,
              padding: [0, 30, 8, 4],
            },
            b1: {
              // color:  colorList[1],
              fontSize: 20,
              padding: [0, 30, 0, 40],
            },
            b2: {
              // color:  colorList[2],
              fontSize: 20,
              padding: [0, 30, 0, 40],
            },
            b3: {
              // color:  colorList[3],
              fontSize: 20,
              padding: [0, 30, 0, 40],
            },
          },
        },
        formatter: function (name) {
          let title = '';
          var total = 0;
          var target;
          var index;
          var number;
          for (var i = 0, l = data.length; i < l; i++) {
            if (data[i].name == name) {
              target = data[i].value;
              number = data[i].number;
              title = data[i].label;
              index = i < 6 ? i : 5;
            }
          }
          return `{a| ${name}\n}{b0| ${target}}`;
        },
      },
      series: [
        {
          type: 'pie',
          center: ['30%', '50%'],
          radius: ['40%', '60%'],
          clockwise: true,
          avoidLabelOverlap: true,
          hoverOffset: 2,
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return params.name + ':' + params.value + '个<br>占比：' + params.percent.toFixed(1) + '%';
            },
            backgroundColor: '#f3f3f3',
            textStyle: {
              color: '#666666',
              fontSize: 14,
              fontWeight: 500,
            },
            padding: [10, 20],
            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
          },
          emphasis: {
            itemStyle: {
              borderColor: '#f3f3f3',
              borderWidth: 5,
            },
          },
          //启用鼠标放上去放大效果，这个挺好的
          itemStyle: {
            normal: {
              color: function (params) {
                return colorList[params.dataIndex];
              },
              // shadowBlur: 20,
              // shadowColor: function (params) {
              //     return colorListShadow[params.dataIndex];
              // },
            },
          },
          label: {
            show: false,
            position: 'outside',
            formatter: '{a|{b}:{d}%}\n{hr|}',
            rich: {
              hr: {
                backgroundColor: 't',
                borderRadius: 1,
                width: 1,
                height: 1,
                padding: [1, 1, 0, -4],
              },
              a: {
                padding: [-15, 7, -10, 7],
              },
            },
          },
          labelLine: {
            normal: {
              length: 10,
              length2: 15,
              lineStyle: {
                width: 1,
              },
            },
          },
          data: newData,
        },
      ],
    };
    myChart.setOption(option)
    },
}
}
</script>
<style lang="scss">
</style>
